<template>
	<div class="content">
		<Notice></Notice>
		<u-navbar :is-back="false">
			<view class="top flex">
				<u-icon class="cate" name="setting" color="#666" @click="openSetting"></u-icon>
				<div class="title flex">
					<text class="tab active">信息预警</text>
				</div>
				<u-icon class="search" name="search" @click="toPath('/pages/search/search?t=2')"></u-icon>
			</view>
		</u-navbar>
		<u-tabs bg-color="#F2F3F7" :list="tabs" :is-scroll="false" :current="tabCurrent" @change="change"></u-tabs>
		<div :class="'tools '+(isShowMask?'':'hide')">
			<u-dropdown @open="isShowMask = true" @close="isShowMask = false">
				<u-dropdown-item v-model="filterId" :title="filterTitle" :options="filterList" @change="filterChange" v-if="!!filterList.length"></u-dropdown-item>
				<u-dropdown-item v-model="warnLevel" :title="warnTitle" :options="warnList" @change="levelChange" v-if="isWarnLevel"></u-dropdown-item>
			</u-dropdown>
			<div class="r flex">
				<i class="sort" @click="sortHandle"></i>
				<i class="multiple" @click="multipleHandle"></i>
				<i class="chart" @click="toPath('/pages/statistics/statistics')"></i>
				<i class="filter" @click="$store.state.isFilter = true"></i>
			</div>
		</div>
		<div class="container">
			<!-- 全部 -->
			<WarnList ref="warnList"></WarnList>
		</div>
		<div class="options flex" v-if="$store.state.multipleMode">
			<u-checkbox v-model="isAllCheck" @change="checkAll">全选</u-checkbox>
			<div class="r flex">
				<div class="r-i" @click="markRead">
					<u-image class="icon" width="36rpx" height="36rpx" src="./../../static/readed.png"></u-image>
					<div class="text">标记已读</div>
				</div>
				<div class="r-i" @click="del">
					<u-image class="icon" width="36rpx" height="36rpx" src="./../../static/delete.png"></u-image>
					<div class="text">删除</div>
				</div>
			</div>
		</div>
		<FilterPop :filters="filterList" :flag="'warn'"></FilterPop>
		<Del :type="'warn'"></Del>
		<WarnlevelPop></WarnlevelPop>

		<u-toast ref="uToast" />
	</div>
</template>

<script>
import { mapState } from "vuex";
import { alias, toRead } from "@/api/subject.js";
import WarnList from "@/components/warnList.vue";
import FilterPop from "@/components/filterPop.vue";
import Del from "@/components/delPop.vue";
import WarnlevelPop from "@/components/warnlevelPop.vue";

export default {
	components: {
		WarnList, FilterPop, Del, WarnlevelPop
	},
	data() {
		return {
			isAllCheck: false,
			tabs: [
				{
					name: "全部",
				},
				{
					name: "公共预警",
				},
				{
					name: "词库预警",
				},
				{
					name: "自定义预警",
				}
			],
			warnList: [
				{
					label: "一般",
					value: 1
				},
				{
					label: "严重",
					value: 2
				},
				{
					label: "重大",
					value: 3
				}
			],
			warnTitle: "预警等级",
			warnLevel: undefined,
			tabCurrent: 0,
			warnType: 0,
			isWarnLevel: false,

			isShowMask: false,
			filterList: [],
			filterTitle: "",
			filterId: "",
			tagParams: {
				tag_type: 1,
				tag_id: null,
				type: 2
			}
		}
	},
	async created() {
		this.$nextTick(async () => {
			await this.getFilterList();
			this.$store.commit("isRefreshWarnListHandle", new Date().getTime());
		});
	},
	watch: {
		selectedArticle(val) {
			if(val.length == this.articleListLength){
				this.isAllCheck = true;
			}else{
				this.isAllCheck = false;
			}
		},
	},
	computed: {
		...mapState(["selectedArticle", "articleListLength"]),
	},
	methods: {
		async init() {
			await this.getFilterList();
			this.$store.commit('isRefreshWarnListHandle', new Date().getTime());
		},
		change(val) {
			this.tabCurrent = val;
			this.warnType = val==0?0:val==1?2:val==2?4:1;
			this.$store.commit('isRefreshWarnListHandle', new Date().getTime());
		},
		async getFilterList() {
			let {data} = await alias({tag_type: 1, tag_id: null, type: 2});
			if(!!data.length){
				this.filterTitle = data[0].filter_title;
				this.filterId = data[0].id;
				this.$store.state.filterParams = data[0];
			}else{
				this.$store.state.filterParams = {};
			}
			this.filterList = data;
			this.filterList.map(item=>{
				item.label = item.filter_title;
				item.value = item.id;
			});
			this.isWarnLevel = true;
		},
		filterChange(val) {
			let filter = this.filterList.filter(item=>item.id == val)[0];
			this.filterId = val;
			this.filterTitle = filter.filter_title;
			this.$store.state.filterParams = {...this.$store.state.filterParams, ...filter};
			this.$store.commit("isRefreshWarnListHandle", new Date().getTime());
		},
		levelChange(val) {
			this.warnLevel = val;
			this.warnTitle = this.warnList.filter(item=>item.value == val)[0].label;
			this.$store.commit("isRefreshWarnListHandle", new Date().getTime());
		},
		openSetting() {
			uni.navigateTo({
				url: "/pages/warnSetting/warnSetting"
			});
		},
		toPath(path) {
			uni.navigateTo({
				url: path
			})
		},
		checkAll(e) {
			this.$refs.warnList.$emit("checkAll", e.value)
		},
		markRead() {
			if(!this.selectedArticle.length){
				this.$refs.uToast.show({
					title: "请选择信息",
					type: "error",
				});
			}else{
				let ids = this.selectedArticle.map(item=>item.id);
				toRead({ids: ids}).then(({code})=>{
					if(code == 200){
						uni.$emit("markRead",ids);
						this.$refs.uToast.show({
							title: "标记已读成功",
							type: "success",
						});
					}
				});
			}
		},
		del() {
			if(!this.selectedArticle.length){
				this.$refs.uToast.show({
					title: "请选择信息",
					type: "error",
				});
			}else{
				this.$store.state.isDel = true;
			}
		},
		sortHandle() {
			uni.hideTabBar();
			this.$store.state.isWarnlevel = true;
		},
		multipleHandle() {
			this.$store.state.multipleMode = !this.$store.state.multipleMode;
			if(this.$store.state.multipleMode){
				uni.hideTabBar();
			}else{
				uni.showTabBar();
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.content{
	height: 100%;
	display: flex;
	flex-direction: column;
}
.top{
	width: 100%;
	justify-content: space-between;
	padding: 20rpx 10rpx;
	box-sizing: border-box;
	
	.cate{
		color: #1E62FC;
		font-size: 55rpx;
	}
	.search{
		font-size: 50rpx;
	}
	.title{
		align-items: center;
	}
	.tab{
		font-size: 36rpx;
		padding: 0 5rpx;
	}
	.active{
		font-size: 38rpx;
		font-weight: bold;
		position: relative;
		z-index: 1;
		&::after{
			content: "";
			position: absolute;
			z-index: 1;
			left: 50%;
			bottom: -9rpx;
			transform: translateX(-50%);
			width: 30rpx;
			height: 8rpx;
			border-radius: 5rpx;
			background-color: #1E62FC;
		}
	}
}
.tools{
	border-bottom: 1rpx solid #F0F0F0;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	height: 80rpx;
	position: relative;
	z-index: 100;
	.r{
		position: absolute;
		z-index: 100;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		align-items: center;
		i{
			cursor: pointer;
			width: 50rpx;
			height: 50rpx;
			margin: 0 10rpx;
		}
		.sort{
			background: url(./../../static/sorting.png) no-repeat center/contain;
		}
		.chart{
			background: url(./../../static/charts-pie.png) no-repeat center/contain;
		}
		.multiple{
			background: url(./../../static/confirm.png) no-repeat center/contain;
		}
		.filter{
			background: url(./../../static/filter-records.png) no-repeat center/contain;
		}
	}
	&.hide{
		/deep/ .u-dropdown__content{ 
			display: none;
		}
	}
}
.container{
	flex-grow: 1;
}
/deep/ .u-dropdown__menu{
	height: 80rpx !important;
}
/deep/ .u-dropdown__menu__item{
	justify-content: unset;
	padding-left: 20rpx;
	flex: unset;
}
.options{
	width: 100%;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
	position: fixed;
	z-index: 500;
	left: 0;
	bottom: 0;
	box-shadow: 0rpx -6rpx 30rpx 0rpx rgba(192, 192, 192, 0.3);
	padding: 0 20rpx;
	box-sizing: border-box;

	.r{
		width: 300rpx;
		justify-content: space-around;

		.r-i{
			cursor: pointer;
			text-align: center;
		}
		.icon{
			margin: auto;
		}
		.text{
			font-size: 26rpx;
			padding-top: 10rpx;
		}
	}
}
</style>
